<template>
  <div>
    <div class="picker-item">
      <CloudDatePicker
        :mode="mode1"
        show-time
        @openChange="handleOpenChange1"
        @panelChange="handlePanelChange1"
      >
      </CloudDatePicker>
    </div>
    <div class="picker-item">
      <CloudRangePicker
        :placeholder="['Start month', 'End month']"
        format="YYYY-MM"
        :value="value"
        :mode="mode2"
        @panelChange="handlePanelChange2"
        @change="handleChange"
      ></CloudRangePicker>
    </div>
  </div>
</template>

<script>
  export default {
    title: '4.受控面板',
    subTitle: '通过组合 mode 与 onPanelChange 控制要展示的面板。',
    data () {
      return {
        mode1: 'time',
        mode2: ['month', 'month'],
        value: [],
      }
    },
    methods: {
      handleOpenChange1 (open) {
        if (open) {
          this.mode1 = 'time';
        }
      },
      handleChange (value) {
        this.value = value;
      },
      handlePanelChange1 (value, mode) {
        this.mode1 = mode;
      },
      handlePanelChange2 (value, mode) {
        this.value = value;
        this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
      },
    }
  }
</script>

<style lang="scss">
  .picker-item {
    padding-bottom: 10px;
  }
</style>